<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" type="image/x-icon" href="/favicon.ico">
  <title>rudyhub.github.io</title>
  <style type="text/css">
    body {
      margin: 0;
    }
    a{
      text-decoration: none;
    }
    .float-l {
      float: left;
    }
    .float-r {
      float: right;
    }
    .margin-r {
      margin-right: 2em;
    }
    .margin-l {
      margin-left: 2em;
    }

    .clear {
      clear: both;
    }
    .border-box {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    .logo-box {
      text-align: center;
    }
    .logo {
      max-width: 64px;
      margin: 64px auto;
      display: block;
    }
    .home-links {
      text-align: center;
    }
    .rmedia-header {
      height: 60px;
      text-align: center;
      border-bottom: #d4d4d4 solid 1px;
      overflow: hidden;
    }
    .rmedia-h1 {
      color: #48525b;
      margin: 0;
      font-size: 24px;
      line-height: 60px;
    }
    .rmedia-layout {
      font-size: 0;
    }
    .rmedia-nav,
    .rmedia-main {
      display: inline-block;
      vertical-align: top;
      line-height: 1.6;
      font-size: 16px;
      color: #6a737d;
      height: calc(100vh - 60px);
      overflow: auto;
    }
    .rmedia-nav {
      width: 360px;
      border-right: #d4d4d4 solid 1px;
      padding: 1em;
      font-size: 14px;
    }
    .rmedia-main {
      width: calc(100% - 360px);
      padding: 1em;
      position: relative;
    }
    .rmedia-h2,
    .rmedia-h3 {
      color: #4168a4;
      font-weight: normal;
    }
    .tree {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .tree-item .tree {
      padding-left: 1em;
    }
    .tree-name {
      cursor: pointer;
      display: inline-block;
      color: #555;
      border: 1px solid transparent;
      padding: .2em .5em;
      -webkit-transition: all .5s;
      transition: all .5s;
    }
    .tree-name:after {
      content: '';
      display: block;
      height: 2px;
      transition: transform .5s;
      transform: scaleX(0);
      background: #60a74e;
    }
    .tree-name:hover:after{
      transform: scaleX(1);
    }
    .tree-name.active {
      background: #d1f8c6;
    }
    .rmedia b {
      color: #b970af;
    }
    .rmedia-section,
    .rmedia-art {
      overflow: hidden;
    }
    time{
      font-size: 14px;
      color: #888;
    }
    img{
      max-height: 150px;
    }
    img:hover{
      max-height: 100%;
    }
    </style>
  <script>
    var version = '1.1.1';
  </script>
</head>
<body>
<div data-version="1.0.0" data-loadurl="http://assets.wenweipo.com/software/RMedia1.0.0x64.zip" class="rmedia">
  <div class="rmedia-header border-box"><h1 class="rmedia-h1">
    RMedia操作介绍
  </h1></div>
  <div class="rmedia-layout border-box">
    <div class="rmedia-nav border-box">
      <h2 class="rmedia-h2">目录</h2>
      <ul class="tree" id="rmedia-nav-list">
        <li class="tree-item">
          <a class="tree-name" href="#a18">更新至1.1.1</a>
        </li>
        <li class="tree-item">
          <a class="tree-name" href="#a17">更新至1.1.0</a>
        </li>
        <li class="tree-item">
          <a class="tree-name" href="#a16">初始版本1.0.0</a>
        </li>
        <li class="tree-item">
          <a class="tree-name" href="#a15">界面简介与基本操作</a>
        </li>
        <li class="tree-item">
          <a class="tree-name" href="#a14">参数面板介绍（结合部分处理种类）</a>
          <ul class="tree">
            <li class="tree-item">
              <a class="tree-name" href="#a13">视频压缩</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a12">视频、音频截取片段</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a11">视频、图片输出带缩略图</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a10">logo添加</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a9">视频、音频分离</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a8">序列图转gif动图或视频</a>
            </li>
          </ul>
        </li>
        <li class="tree-item">
          <a class="tree-name" href="#a7">全局参数面板介绍</a>
        </li>
        <li class="tree-item">
          <a class="tree-name" href="#a6">更多功能介绍</a>
          <ul class="tree">
            <li class="tree-item">
              <a class="tree-name" href="#a5">屏幕录制</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a4">PDF转图片</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a3">图片拼接</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a2">音/视频拼接</a>
            </li>
            <li class="tree-item">
              <a class="tree-name" href="#a1">音/视频混合</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div id="rmedia-scroll-body" class="rmedia-main border-box">
      <section class="rmedia-section">
        <article class="rmedia-art">
          <h3 id="a18" class="rmedia-h3">3 - 更新至1.1.1 <time>(更新日期: 2018-8-17)</time></h3>
          <div><a href="http://assets.wenweipo.com/software/RMedia1.1.1x64.zip" download="RMedia1.1.1x64.zip">下载RMedia1.1.1x64.zip</a></div>
          <article class="rmedia-art">
            <ul>
              <li>修改LOGO的晶格手柄：去掉中心点，让拖拽整个LOGO区域都可实现移动</li>
              <li>修补LOGO的一些可能存在隐患的缺点</li>
              <li>修改菜单栏【开始】批处理按钮的样式，因为发现有些人看不见它</li>
              <li>在项右下方添加了【开始】按钮，用以单独处理此项</li>
              <li>其他更新</li>
            </ul>
            <div class="clear"></div>
            <hr>
          </article>
        </article>
        <article class="rmedia-art">
          <h3 id="a17" class="rmedia-h3">2 - 更新至1.1.0 <time>(更新日期: 2018-8-12)</time></h3>
          <div><a href="javascript:alert('请下载更新版RMedia'+version)">下载RMedia1.1.0x64.zip</a></div>
          <article class="rmedia-art">
            <img class="float-r margin-l" src="./img/11.png" alt="">
            <div>如右图：</div>
            <ul>
              <li>更新了LOGO控制，换用更灵活的晶格手柄控制</li>
              <li>修复了LOGO显示起始时间为0时无效的BUG</li>
              <li>默认一排显示5个改为显示3个</li>
              <li>更新了无关紧要的版权LOGO图标</li>
            </ul>
            <div class="clear"></div>
            <hr>
          </article>
        </article>
        <article class="rmedia-art">
          <h3 id="a16" class="rmedia-h3">2 - 初始版本1.0.0 <time>(更新日期: 2018-5-18)</time></h3>
          <article class="rmedia-art">
            <div><a href="javascript:alert('请下载上方最新版，旧版bug多')">下载RMedia1.0.0x64.zip</a></div>
            <div><a href="javascript:alert('请下载上方最新版，旧版bug多')">下载RMedia1.0.0x86.zip</a></div>
          </article>
        </article>
        <article class="rmedia-art"><h3 id="a15" class="rmedia-h3">3 - 界面简介与基本操作</h3>
          <article class="rmedia-art">
            <p><img class="float-r margin-l" src="./img/00.jpg" alt=""></p>
            <p>如右图：</p>
            <p>【菜单栏】和【工作区】</p>
            - 菜单栏：
            <ul>
              <li>选择文件<br>
                <small>可以输入任意多个文件，除拼接、混合操作外，其他操作可以输入任意不同类型的文件，如图片、视频、音频全部都放进来。</small>
              </li>
              <li>保存目录<br>
                <small>默认输出位置是桌面。需要注意的是有些操作是不会提示覆盖/替换的，所以建议操作之前还是检查一下输出位置，以免不必要的麻烦。</small>
              </li>
              <li>批量设置<br>
                <small>是进入批量设置参数的面板，它可以控制一些全局参数，如批量添加LOGO、批量重命名、批量限制尺寸等</small>
              </li>
              <li>更多功能<br>
                <small>为了界面简洁，很多功能放到此按钮的下拉菜单中。</small>
              </li>
              <li>开始<br>
                <small>除【更多功能】菜单外，其他操作都需要点击【开始】处理，开始后，按钮会变成【停止】，点击它可以断中当前正在处理的文件或断中全部。</small>
              </li>
              <li>视图大小控制滑杆<br>
                <small>主要是用来缩放工作区视图方便观察的，尤其调整LOGO比例时，可能需要放大观察。右滑放大，左滑缩小。</small>
              </li>
            </ul>
            - 工作区：
            <p>从上到下分别是：文件预览区、时间/帧控制区、LOGO控制区、输入输出参数控制区</p>
            <ul>
              <li>文件预览区 <br>
                <small>
                  - 视频或图片可以在此看到预览图。支持播放的音频、视频类型，中央为有白色三角播放按钮，点击它可以播放，再次点击画面则暂停。
                  <br><br>
                  - 右下方的三个图标按钮从左到右分别是：【锁定/解锁】、【显示/隐藏透明区】、【删除】。<br>
                  【锁定/解锁】可理解为“选中/取消、全选/反选”的合体，它的作用是，有些操作会忽视未锁定的文件，如批量添加LOGO，它只给所有锁定的文件添加。
                  【显示/隐藏透明区】与【删除】无需解释。<br>
                  值得注意的是这些按钮的共同特性，左击只操作当前文件，右击操作所有文件。如，右击【删除】，工作区中所有文件将全部被清空。
                </small>
              </li>
              <li>时间/帧控制区 <br>
                <small>视频、音频文件的时间，可以通过此区域来跳到任意时间点，可精确到帧。</small>
              </li>
              <li>LOGO控制区 <br>
                <small>此面板是为了单独控制当前文件的LOGO，它不影响全局</small>
              </li>
            </ul>
          </article>
        </article>
        <article class="rmedia-art"><h3 id="a14" class="rmedia-h3">4 - 参数面板介绍（结合部分处理种类）</h3>
          <section class="rmedia-section">
            <article class="rmedia-art"><h3 id="a13" class="rmedia-h3">4.1 - 视频压缩</h3>
              <article class="rmedia-art"><img class="float-r margin-l" src="./img/01.jpg" alt="参数图">
                <p><b>主要参数：</b></p>
                <p>输出名称：默认会在原名称前加全局命名参数的前缀，如：RMedia_。</p>
                <p>输出格式：默认输出mp4。一般情况下拉菜单中可选择的格式都是允许输出的格式，一些除特殊情况除外。</p>
                <p>输出大小：这是压缩最关键的参数，默认会自动调整到该视频最适合的压缩率，百分比前的数值即压缩后的预估大小，有3M以内的误差，一般压缩后会比这个值小一些。</p>
                <p>输出尺寸：尺寸也是压缩比较关键的参数，全局默认限制在1280x720的范围，一般网络传播用这个值就足够。</p>
              </article>
            </article>
            <article class="rmedia-art"><h3 id="a12" class="rmedia-h3">4.2 - 视频、音频截取片段</h3>
              <article class="rmedia-art"><img class="float-r margin-l" src="./img/02.jpg" alt="参数图">
                <p><b>主要参数：</b></p>
                <p>时间控制：滑杆滑块取时间位置，下方左右按钮可以微调精确到帧，按钮之间的参数是每点击一次跳多少帧，默认为2帧。</p>
                <p>
                  截取：选好时间位置后，点击截取的第一个按钮，即将当前时间设置为起点。再往后选择时间位置，点击第二个按钮即将当前时间设置为终点。<br>
                  需要注意：当先取的终点小于起点时，起点将自动变小与终点相等，此时，参数是无效的。同样，当起点时间大于终点时间时，终点时间也会自动增大与起点相等，也是无效的。
                </p>
              </article>
            </article>
            <article class="rmedia-art"><h3 id="a11" class="rmedia-h3">4.3 - 视频、图片输出带缩略图</h3>
              <article class="rmedia-art"><p>左图：关闭状态 | 右图：开启状态</p>
                <img class="float-l margin-r" src="./img/03-1.jpg">
                <img class="float-l margin-r" src="./img/03-2.jpg">
                <div class="clear">
                  <p>开启后，将同时输出一个缩略图。即，假如需要压缩视频并输出缩略图，只需要勾选此项即同时处理，输出两个文件。</p>
                  <p><b>主要参数：</b></p>
                  <p>取缩略图的时间位置：操作与音频、视频的截取时间相同。注意的是，只能在截取的时间起点与终点之间取值。</p>
                  <p>缩略图的宽：可设置宽度，高度自动等比缩放，与视频比例相同。</p>
                </div>
              </article>
            </article>
            <article class="rmedia-art"><h3 id="a10" class="rmedia-h3">4.4 - logo添加</h3>
              <article class="rmedia-art"><img class="float-r margin-l" src="./img/04.jpg">
                <p>
                  logo控制面板中，第一行按钮从左到右分别是：【添加logo】、【删除logo】、【设置logo显示的起始时间】、【设置logo显示的终止时间】。设置logo显示的起始/终止时间与截取片段的操作完全一样的，需要注意的是，logo显示的时间段在上方时间控制滑杆的显示颜色是红色区段。</p>
                <p>
                  尺寸比例：调节logo与视频的比例。对比例为敏感的童鞋要注意了，在预览窗看到的logo大小不会是输出结果的大小，最好滑动菜单栏后的控制杆放大到视频输出的大小相当进行观察，也可以先输出一小段试看找感觉。</p>
                <p>水平位置：这是相对于左边的位置比例。</p>
                <p>垂直位置：这是相对于顶部的位置比例。</p>
                <p><em>注意：图片也可以添加logo，包括gif，不同的是，没有时间。</em></p>
              </article>
            </article>
            <article class="rmedia-art"><h3 id="a9" class="rmedia-h3">4.5 - 视频、音频分离</h3>
              <article class="rmedia-art"><p>左图：关闭状态 | 右图：开启状态</p>
                <img class="float-l margin-r" src="./img/05-1.jpg">
                <img class="float-l margin-r" src="./img/05-2.jpg">
                <div class="clear">
                  <p>如果是视频，并且有声音，它将分离出无声的视频和左、右声道三个文件（如果是单声道即非立体声，则输出一个视频，一个音频）。</p>
                  <p>如果是音频，并且不是单声道，则它会将左、右声道分离两个文件。</p>
                </div>
              </article> <!----></article>
            <article class="rmedia-art"><h3 id="a8" class="rmedia-h3">4.6 - 序列图转gif动图或视频</h3>
              <article class="rmedia-art"><img class="float-r margin-l" src="./img/06.jpg">
                <p>当输入的是图片文件时，序列图选框会自动显示，如果决定输入序列图片转为gif动图，需要满足以下条件：</p>
                <ol>
                  <li>图片的命名末尾必须是有规律的数字如：image01.jpg、image02.jpg、image03.jpg...，或
                    01.jpg、02.jpg、03.jpg...。数字的个数应大于图片总数的位数。
                  </li>
                  <li>输出的格式类型必须记得调整为gif或视频的其中一种。</li>
                  <li>确保输入的是第一张图片，一张即可。</li>
                  <li>另外，建议把序列图单独放在一个文件夹中。</li>
                </ol>
              </article>
            </article>
            <hr>
          </section>
        </article>
        <article class="rmedia-art"><h3 id="a7" class="rmedia-h3">5 - 全局参数面板介绍</h3>
          <article class="rmedia-art"><img class="float-r margin-l" src="./img/07.jpg" alt="">
            <p>实际上就是对所有（锁定）文件进行统一调控。部分功能除外。</p>
            <p>压缩速度级别：是对压缩时处理的速度设置，越快需要的时间越少，但处理的效果会相对差。从实验中看，实际上各级别的时间差别不大，一般保持默认即可。</p>
            <p>宽度、高度上限：规定视频的最大度、最大高度，有时候竖屏的视频可能需要对高度进行修改。本项只对（锁定的）视频有效，对图片等无效。</p>
            <p>大小上限：统一让所有锁定的视频都在此范围内。也是只对视频有效。</p>
            <p>LOGO面板：与文件参数面板相同，只不过此项是对所有锁定的文件进行控制。</p>
            <p>输出名称：当修改并点击确定后，所有锁定的文件的输出名称将被序列化。<b>输入框后的【移动】、【复制】按钮是单独的功能，是为了方便批量重命名（序列化文件名）的。点击即处理，不参与压缩等其他处理。</b></p>
          </article>
        </article>
        <article class="rmedia-art"><h3 id="a6" class="rmedia-h3">6 - 更多功能介绍</h3> <!---->
          <section class="rmedia-section">
            <article class="rmedia-art"><h3 id="a5" class="rmedia-h3">6.1 - 屏幕录制</h3>
              <article class="rmedia-art"><img class="float-r margin-l" src="./img/m01.jpg" alt="">
                <ol>
                  <li>
                    <h4>录制模式</h4>
                    <ul>
                      <li>全屏有声视频：全屏录制，并且录制电脑内部声音或麦克风的声音。</li>
                      <li>小屏有声视频：框选区域录制，并且录制电脑内部声音或麦克风的声音。</li>
                      <li>全屏无声视频：全屏录制，禁任何声音。</li>
                      <li>小屏无声视频：框选区域录制，禁任何声音。</li>
                      <li>无画面仅录音：只录制电脑内部声音或麦克风的声音。</li>
                    </ul>
                  </li>
                  <li>
                    <h4>输出帧速率</h4>
                    <p>默认25帧/秒。一般录制做gif可以设置15帧/秒，视频可以24-30。</p>
                  </li>
                  <li>
                    <h4>视频比特率</h4>
                    <p>事实上它就是压缩视频的主要参数。取值最好是2的n次幂，如64、128、256、512、1024、2048...，一般1280x720设1024即可。</p>
                  </li>
                  <li>
                    <h4>音频比特率</h4>
                    <p>一般128k是比通用的立体声音频，如果对音频要求不高，96k即可以满足。对于视频而言，它的大小可以忽略不记。</p>
                  </li>
                  <li>
                    <h4>音频录制设备</h4>
                    <p>
                      当选择有声模式时，此项是必选的。通常情况下，电脑默认使用的设备是被禁用的。需要右击电脑右下方的小喇叭，选择录音设备，进入下左图窗口，右击，勾上“显示禁用的设备”。进入下右图，右击需要启用的设备，勾“启用”即可。</p>
                    <img src="./img/m02.jpg" style="width: 33%;" alt="">
                    <img src="./img/m03.jpg" style="width: 33%;" alt="">
                    <p>启用之后，回到软件录制面板，点击【扫描录音设备】按钮，可用的设备将罗列在下拉菜单中，选择需要的设备。即可进行下一步。</p>
                  </li>
                  <li>
                    <h4>输出后匹配宽度</h4>
                    <p>视频输出时调整宽度到此值，高度等比缩放。</p>
                  </li>
                  <li>
                    <h4>录制区域</h4>
                    <p>当选择小屏模式时，此项可选。可点击【调整录制区域】按钮，会弹出蓝色选区框，调整它覆盖需要录制的区域，然后键盘【Enter】键确认选区，【Esc】取消并退出选区。</p>
                    <p>最后点击【开始录制】即进入录制状态，按键盘【F2】完成录制。</p>
                  </li>
                </ol>
              </article>
            </article>
            <article class="rmedia-art"><h3 id="a4" class="rmedia-h3">6.2 - PDF转图片</h3>
              <article class="rmedia-art"><p>进入新的操作界面，有以下按钮如图。</p>
                <img src="./img/m04.jpg" alt="">
                <p>【打开PDF】：是可批量输入处理的。</p>
                <p>【开始】：可直接点击开始入进转换状态，会把第一个PDF文档的每一页都单独打印为一张图片。</p>
                <p>
                  【参数设置】：弹出参数设置面板。共有两项：<br>
                  <small>1.渲染比例：决定输出图片的大小，默认是原pdf的2倍。</small>
                  <br>
                  <small>2.输出质量：质量决定图片的清晰度，当然，这要基于渲染比例的大小，如果输出比例太小，此值无法使图片变清晰。</small>
                </p>
              </article>
            </article>
            <article class="rmedia-art"><h3 id="a3" class="rmedia-h3">6.3 - 图片拼接</h3>
              <article class="rmedia-art"><img src="./img/m05.jpg" alt="">
                <p>非常简单，把所有要拼接的图片都打开进来，然后选择排列方式，勾选预览可以看到排列的结果。点击【确定】即输出为png图片。</p>
                <p>高级样式：如果懂css样式，也可以完全通过这里来操作布局。</p>
                <p>需要多尝试。</p></article>
            </article>
            <article class="rmedia-art"><h3 id="a2" class="rmedia-h3">6.4 - 音/视频拼接</h3>
              <article class="rmedia-art"><h4>支持两种情况：</h4>
                <ol>
                  <li>视频拼接：输入的必须都是视频。输出将以第一个视频的尺寸为准，将其他所有的都拉伸匹配，当第一个视频没有音频时，输出的将可能是静音的。输出的比特取全局参数。</li>
                  <li>音频拼接：输入的必须都是音频。</li>
                </ol>
                <p>未来可能会把文件的视频、音频分离到可视的轨道以编辑。</p>
              </article>
            </article>
            <article class="rmedia-art"><h3 id="a1" class="rmedia-h3">6.5 - 音/视频混合</h3>
              <article class="rmedia-art"><h4>支持的可能的情况：</h4>
                <ol>
                  <li>一个视频 + 多个音频：第一个必须是视频，接下来的可以输入任意多个音频，这些将被混合到第一个视频中，成为声音源。输出时间以第一个视频为准，超出的输入会被截掉。</li>
                  <li>多个视频混合：除第一个视频外，接下来的视频必须是有声音的，否则可能报错，因为它们将被当成音频处理，混合到第一个视频。输出时间同上。</li>
                  <li>多个音频混合：此时，排序可是随意的。输出的时间以最长的为准。</li>
                </ol>
              </article>
            </article>
            <hr>
          </section>
        </article>
        <hr>
      </section>
    </div>
  </div>
</div>
<script>
  var items = document.querySelectorAll('.tree-name'),
      len = items.length,
      i = 0;
  for(; i<len; i++){
      items[i].onclick = function(){
          for(var n=0; n<len; n++)
              items[n].classList.remove('active');
          this.classList.add('active');
      }
  }
  // var imgs = document.getElementsByTagName('img'),
  //     zoomBox = document.createElement('div'),
  //     zoomImg = document.createElement('img');
  // len = imgs.length;
  // i = 0;
  // zoomBox.setAttribute('style', 'position:fixed;overflow:auto;');
  // zoomImg.setAttribute('style', 'width:auto;height:auto;');
  // zoomBox.appendChild(zoomImg);
  // for(; i<len; i++){
  //     imgs[i].onmouseenter = function(e){
  //         zoomImg.src = this.src;
  //         zoomBox.style.left = e.clientX + 'px';
  //         zoomBox.style.top = e.clientY + 'px'
  //         document.body.appendChild(zoomBox);
  //     };
  //     imgs[i].onmouseleave = function(){
  //       document.body.removeChild(zoomBox);
  //     };
  // }
</script>
</body>
</html>
